<template>
  <div class="headerbox">收藏夹</div>
  <div class="mainbox">
    <el-menu
      default-active="1"
      class="el-menu-demo"
      mode="horizontal"
      active-text-color="#FF4200"
      @select="handleSelect"
    >
      <el-menu-item index="1">全部宝贝</el-menu-item>
      
    </el-menu>
    <div class="productbox">
        <div v-for="item in starproduct" :key="item.product_id" class="itembox"  @click="store.dispatch('goproductsellpage',item.product_id)">
          <img :src="`http://localhost:3001/${item.product_picture}`" />
          <div class="productname">{{ item.product_name }}</div>
          <div><span class='sellprice'>￥{{ item.product_selling_price }}</span>&nbsp;<span class="price">￥{{ item.product_price }}</span></div>
        </div>
      </div>
  </div>
</template>

<script setup>
import { useStore } from "vuex";
import { loveproductApi } from "../../api/goods";
import { ref } from "vue";
const store = useStore();
let starproduct = ref();
const getloveproduct = async () => {
  let data = await loveproductApi(store.state.user.user_id);
  console.log(data);
  starproduct.value = data.collectList;
};
getloveproduct();
</script>


<style scoped>
.headerbox {
  height: 60px;
  background-color: #ff4400;
  color: white;
  font-size: 35px;
  line-height: 60px;
  text-align: left;
  padding: 20px;
}
.mainbox {
  width: 80%;
  margin: auto;
 
}
.productbox {
  display: flex;
  justify-content: space-around;
  flex-flow: wrap;
  margin: 30px;
}
.itembox{
    margin: 20px;
}
img {
  width: 200px;
  height: 200px;
}
.productname{
    width: 200px;
    height: 20px;
    overflow: hidden;
}
.sellprice{
    color: #f40;
    font-weight: 700;
}
.price{
    text-decoration: line-through;
    white-space: nowrap;
    color: #9c9c9c;
    font-weight: 400
}
</style>

